<template>
  <div class="delivery-delete-modal">
    <modal-temp ref="modal" @confirm="confirm(deliveryId)" modal-name="删除送货单">
      <template #btn>
        <a-button size="large" type="danger" class="btn" @click="deleteDelivery">
          删除送货单
        </a-button>
      </template>
      <template #content>
        <p>确认删除送货单</p>
        <div class="delivery-delete-modal-inf">
          <p>送货单ID：{{deliveryId}}</p>
          <p>送货单客户：{{name}}</p>
          <p>送货单总金额：{{totalAmount}}</p>
          <p>送货单订单量：{{orderQuantity}}</p>
          <small>删除的送货单会回到 允许修改 的订单队列中</small>
        </div>
      </template>
    </modal-temp>
  </div>
</template>

<script>
import ModalTemp from './ModalTemp';
import {
  divide2Float2Fixed
} from '@/utils/NumberChange.js';

export default {
  name: "DeliveryDeleteModal",
  props: {
    summary: Object
  },
  data() {
    return {
    };
  },
  computed: {
    deliveryId() {
      return this.summary.deliveryId ?? 'Error';
    },
    name() {
      return this.summary.name ?? 'Error';
    },
    totalAmount() {
      // 由于传输过来的数据是乘了100倍的，因此要将它除回去才能展现正确的数据
      const totalAmount = this.summary.totalAmount ?? 'Error';
      return divide2Float2Fixed(totalAmount);
    },
    orderQuantity() {
      return this.summary.orderQuantity ?? 'Error';
    }
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    confirm(id) {
      this.$emit('confirm');
    },
    deleteDelivery() {
      this.$emit('deleteDelivery');
    }
  },
  components: {
    ModalTemp,
  },
};
</script>

<style scoped lang="scss">
.delivery-delete-modal {
  .inf {
    margin-left: 20px;
  }
}
</style>

<style lang="scss">
.delivery-delete-modal-inf {
  margin-left: 20px;
  >small {
    color: darkcyan;
  }
}
</style>
